<template>
  <div class="image-zoom-viewer">
    <!-- 控制栏 -->
    <div class="control-bar">
      <el-date-picker
        v-model="selectedDate"
        type="date"
        placeholder="选择日期"
        value-format="YYYY-MM-DD"
        style="margin-right: 10px"
      />
      <el-button @click="loadImageByDate" type="primary">加载图片</el-button>

      <div class="navigation-buttons">
        <el-button @click="prevImage" :icon="ArrowLeft" circle plain :disabled="currentIndex <= 0"></el-button>
        <el-button @click="nextImage" :icon="ArrowRight" circle plain :disabled="currentIndex >= imageList.length - 1"></el-button>
        <el-button @click="downloadImage" :icon="Download" plain>下载图片</el-button>
      </div>
    </div>

    <!-- 图片展示区域 -->
    <div class="image-container" ref="container" @wheel.prevent="handleWheelZoom">
      <img
        ref="imageView"
        :src="currentImageUrl"
        alt="图纸"
        class="zoomable-image"
        @mousedown="startDrag"
        @dragstart.prevent
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ArrowLeft, ArrowRight, Download } from '@element-plus/icons-vue';
// 默认设置为今天
onMounted(() => {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0');
  const day = String(today.getDate()).padStart(2, '0');
  selectedDate.value = `${year}-${month}-${day}`;
  loadImageByDate();
});

// props
const props = defineProps({
  // 图片列表格式：[{ date: '2025-06-01', url: '...' }]
  images: {
    type: Array,
    required: true
  }
});

// data
const selectedDate = ref('');
const currentIndex = ref(0);
const currentImageUrl = ref('');
const imageList = ref(props.images);

const imageView = ref(null);

let scale = 1;
let isDragging = false;
let startX = 0, startY = 0;
let offsetX = 0, offsetY = 0;

// methods
function loadImageByDate() {
  const index = imageList.value.findIndex(img => img.date === selectedDate.value);
  if (index >= 0) {
    currentIndex.value = index;
    currentImageUrl.value = imageList.value[index].url;
    resetTransform();
  }
}

function prevImage() {
  if (currentIndex.value > 0) {
    currentIndex.value--;
    currentImageUrl.value = imageList.value[currentIndex.value].url;
    resetTransform();
  }
}

function nextImage() {
  if (currentIndex.value < imageList.value.length - 1) {
    currentIndex.value++;
    currentImageUrl.value = imageList.value[currentIndex.value].url;
    resetTransform();
  }
}

function downloadImage() {
  if (!currentImageUrl.value) return;
  const link = document.createElement('a');
  link.href = currentImageUrl.value;
  link.download = `schedule_${selectedDate.value}.jpg`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

function handleWheelZoom(e) {
  const delta = e.deltaY * -0.01;
  scale += delta;
  scale = Math.min(Math.max(0.5, scale), 3); // 缩放限制
  applyTransform();
}

function startDrag(e) {
  if (e.button !== 0) return; // 只允许左键触发拖拽
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;

  const transform = imageView.value.style.transform;
  const matches = /translate$$([-.\d]+)px, ([-.\d]+)px$$/.exec(transform);
  if (matches) {
    offsetX = parseFloat(matches[1]);
    offsetY = parseFloat(matches[2]);
  } else {
    offsetX = 0;
    offsetY = 0;
  }

  document.addEventListener('mousemove', dragMove);
  document.addEventListener('mouseup', stopDrag);
}

function dragMove(e) {
  if (!isDragging) return;

  const dx = e.clientX - startX;
  const dy = e.clientY - startY;

  offsetX += dx;
  offsetY += dy;

  startX = e.clientX;
  startY = e.clientY;

  applyTransform();
}

function stopDrag() {
  isDragging = false;
  document.removeEventListener('mousemove', dragMove);
  document.removeEventListener('mouseup', stopDrag);
}

function applyTransform() {
  imageView.value.style.transform = `scale(${scale}) translate(${offsetX}px, ${offsetY}px)`;
}

function resetTransform() {
  scale = 1;
  offsetX = 0;
  offsetY = 0;
  applyTransform();
}
</script>

<style scoped>
.image-zoom-viewer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.navigation-buttons {
  display: flex;
  gap: 10px;
}

.image-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  margin: 10px;
}

.zoomable-image {
  user-select: none;
  pointer-events: auto;
  cursor: grab;
}

.zoomable-image:active {
  cursor: grabbing;
}
</style>
